<template>
  <el-drawer
    :visible.sync="drawer"
    :with-header="false"
    direction="rtl"
    :size="size"
    custom-class="c-drawer"
    :append-to-body="true"
    @closed="closed"
  >
    <h3 class="l-flex--row center" v-if="schema.title">
      {{ schema.title }}
    </h3>
    <div v-if="schema.hasDel">
      <base-btn :btnData="btnData" @click.native="onDel"></base-btn>
    </div>
    <table-list
      v-if="drawer"
      ref="table"
      :isShowTitle="false"
      :data="listData"
      :column-cfg="schema.columnCfg"
      :total-size="totalSize"
      :page-size="filterParams.pageSize"
      :rowKey="schema.rowKey"
      :loading="dataLoading"
      @refresh-list="getList"
      :queryBtnCfg="schema.queryBtnCfg"
      :select-type="schema.selectType"
      @selection-change="handleSelectionChange"
      v-bind="$attrs"
      v-on="$listeners"
      @del-item="onDelItem"
    >
      <slot></slot>
    </table-list>
    <div
      class="l-flex--row center"
      style="margin-top: 10px"
      v-if="schema.selectType && !schema.hasDel"
    >
      <base-btn :btnData="btnCancel" @click.native="drawer = false"></base-btn>
      <base-btn :btnData="btnOk" @click.native="handleConfirm"></base-btn>
    </div>
  </el-drawer>
</template>

<script>
import TableList from '@/components/TableListNew/index';
import ListAction from '@/views/_mixins/list-action';
import BaseBtn from '@/components/BaseBtn/index';
export default {
  name: 'TableDrawer',
  mixins: [ListAction],
  components: {
    TableList,
    BaseBtn
  },
  props: {
    schema: {
      type: Object,
      default: () => {}
    },
    size: {
      type: String,
      default: '50%'
    }
  },
  data() {
    return {
      btnData: {
        name: '移除',
        type: 'clear',
        bgColor: 'rgb(245, 108, 108)'
      },
      btnOk: {
        name: '确定',
        type: 'ok'
      },
      btnCancel: {
        name: '取消',
        type: 'cancel',
        bgColor: '#2B2B2C'
      },
      drawer: false,
      list: this.schema.list,
      filterParams: { pageSize: 10, ...(this.schema.condition || {}) }
    };
  },
  created() {
    if (this.schema.hasDel) {
      this.schema.columnCfg[':action'] = {
        label: '操作',
        width: '100',
        actionArr: [
          {
            label: '移除',
            event: 'del-item',
            btnType: 'del'
          }
        ]
      };
    }
  },
  methods: {
    onDel() {
      if (!this.multipleSelection.length) {
        this.$message.error('请选择要移除的数据');
        return false;
      }
      for (const item of this.multipleSelection) {
        let index = this.listData.findIndex(
          i => i[this.schema.id] === item[this.schema.id]
        );
        this.listData.splice(index, 1);
      }
      this.$emit('update', this.listData);
    },
    onDelItem(row) {
      let index = this.listData.findIndex(
        i => i[this.schema.id] === row[this.schema.id]
      );
      this.listData.splice(index, 1);
      this.$emit('update', this.listData);
    },
    hide() {
      this.drawer = false;
    },
    async show(items = []) {
      this.drawer = true;
      await this.$nextTick();
      this.$refs.table.getTable().clearSelection();
      if (!this.schema.isSingle) {
        for (const item of items) {
          this.$refs.table.getTable().toggleRowSelection(item, true);
        }
      }
      this.filterParams = { pageSize: 10, ...(this.schema.condition || {}) };
      this.getList();
    },
    getListProxy() {
      return this.drawer;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.schema.isSingle && this.multipleSelection.length > 1) {
        this.$refs.table.getTable().clearSelection();
        this.$refs.table
          .getTable()
          .toggleRowSelection(val[val.length - 1], true);
        this.$message.info('只能选择一条数据');
      }
    },
    handleConfirm() {
      if (!this.multipleSelection.length) {
        this.$message.error('请选择记录');
        return;
      }
      this.$emit('confirm', this.multipleSelection);
      this.drawer = false;
    },
    closed() {
      this.$emit('closed');
    }
  }
};
</script>
<style lang="scss" scoped></style>
